"use client"

import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"

const defaultRegions = ["全部", "内地", "港台", "欧美", "韩国", "日本", "其他"]

interface RegionNavProps {
  selectedRegion: string
  onRegionChange: (region: string) => void
  regions?: string[]
}

export function RegionNav({ selectedRegion, onRegionChange, regions = defaultRegions }: RegionNavProps) {
  return (
    <div className="flex space-x-4 mb-8">
      {regions.map((region) => (
        <Button
          key={region}
          variant="ghost"
          className={cn(
            "h-8 rounded-full",
            selectedRegion === region && "bg-primary text-primary-foreground hover:bg-primary/90",
          )}
          onClick={() => onRegionChange(region)}
        >
          {region}
        </Button>
      ))}
    </div>
  )
}

